<template>
  <div class="accountDetail">
    <div class="filter">
      <div>
        <span>交易类型</span>
        <el-select class="type" v-model="moneyType" placeholder="请选择交易类型">
          <el-option label="全部" value="">
          </el-option>
          <el-option v-for="(item, index) in rechargeTypeArr" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span>支付时间</span>
        <el-date-picker class="time" v-model="time" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div>
        <b class="button-w" @click="search">查询</b>
      </div>
    </div>
    <noCont v-if="isEmpty"></noCont>
    <div class="tables" v-if="!isEmpty">
      <el-table :data="chargeList" style="width: 100%">
        <el-table-column prop="gmtCreate" label="支付时间" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.gmtCreate ? scope.row.gmtCreate.split(' ')[0] : '--' }}</span>
            <br>
            <span>{{ scope.row.gmtCreate ? scope.row.gmtCreate.split(' ')[1] : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="moneyDetail" label="交易金额" align="center">
        </el-table-column>
        <el-table-column prop="typeDetail" label="交易类型" align="center">
        </el-table-column>
        <el-table-column prop="beforMoney" label="交易前余额(元)" align="center">
        </el-table-column>
        <el-table-column prop="afterMoney" label="交易后余额(元)" align="center">
        </el-table-column>
        <el-table-column prop="content" label="交易备注" align="center">
        </el-table-column>
      </el-table>
      <div class="pager">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
import NavTitle from '../../../base/navTitle/index'
import { rechargeTypeArr } from '../../../../assets/js/common.js'
import { pageCommon } from '../../../../assets/js/mixin.js'
import { mapGetters } from 'vuex'
import NoCont from '../../../base/noCont/index'
export default {
  name: 'accountDetail',
  mixins: [pageCommon],
  components: {
    NavTitle,
    NoCont
  },
  computed: {
    params () {
      return {
        type: this.moneyType,
        startTime: this.time[0],
        endTime: this.time[1],
        limit: this.pageSize,
        currPageNo: this.pageNo,
        sellerAccountId: this.userInfo.sellerAccountId
      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  data () {
    return {
      navArr: ['资金流水'],
      apiUrl: '/api/fund/flow/seller',
      rechargeTypeArr: rechargeTypeArr,
      moneyType: '',
      time: '',
      chargeList: []
    }
  },
  methods: {
    setList (data) {
      this.chargeList = data
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.accountDetail
  padding-bottom 60px
  .filter
    margin-top 24px
    >div
      display inline-block
      margin-bottom 16px
    span
      margin-right 12px
    .type
      width 240px
      margin-right 40px
    .time
      width 300px
      margin-right 40px
  .tables
    margin-top 16px
</style>
